
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/test2/js/jquery.js"></script>
    <style>
        .red{
            color: red;
        }
        .green{
            color:green;
        }
    </style>
</head>
<body>
    <form action="/test2/user/register" method="POST" onsubmit="return check()" enctype="multipart/form-data">
        用户名<input type="text" name="username" id="username" value="${user.username}"><span></span> <span class="red">${msg}${errors.username}</span><br>
        密码:<input type="text" name="password" id="password" ><span></span> <span class="red">${errors.password}</span> <br>
        密码确认:<input type="text" name="rePassword" id="rePassword"><span></span><br>
        年龄:<input type="number" name="userAge" id="userAge" value="${user.userAge}"><span></span> <span class="red">${errors.userAge}</span> <br>
        生日：<input type="date" name="birthday" id="birthday" value="${user.birthday}"><span></span> <span class="red">${errors.birthday}</span> <br>
        邮箱:<input type="text" name="email" id="email" value="${user.email}"> <span></span> <span class="red">${errors.email}</span><br>
        上传头像：<input type="file" accept="image" name="mf">
        <input type="submit" value="注册">
    </form>
</body>
<script>
    function check(){
        //获取 所有输入框的值
        let username = $("#username").val();
        let password = $("#password").val();
        let rePassword = $("#rePassword").val();
        let userAge = $("#userAge").val();
        let birthday = $("#birthday").val();
        let email = $("#email").val();

        let flag1 = true;
        let flag2 = true;
        let flag3 = true;
        let flag4 = true;
        let flag5 = true;
        let flag6 = true;

        let reg1 = /^(?=.*\d)(?=.*[a-zA-Z])[a-zA-Z\d]{6,10}$/;

        if(!reg1.test(username)){
            $("#username").next().text("用户名应该是6-10位的数字和字母的组合");
            $("#username").next().addClass("red");
            flag1 = false;
        }else{
            $("#username").next().text("√");
            $("#username").next().addClass("green");
            flag1 = true;
        }

        if(!reg1.test(password)){
            $("#password").next().text("密码应该是6-10位的数字和字母的组合");
            $("#password").next().addClass("red");
            flag2 = false;
        }else{
            $("#password").next().text("√");
            $("#password").next().addClass("green");
            flag2 = true;
        }

        if(password != rePassword){
            $("#rePassword").next().text("两次密码不一致");
            $("#rePassword").next().addClass("red");
            flag3 = false;
        }else if(rePassword != ''&& password!= ""){
            $("#rePassword").next().text("√");
            $("#rePassword").next().addClass("green");
            flag3 = true;
        }

        if(userAge <0 || userAge > 150){
            $("#userAge").next().text("年龄应该在0-150之间");
            $("#userAge").next().addClass("red");
            flag4 = false;
        }else{
            $("#userAge").next().text("√");
            $("#userAge").next().addClass("green");
            flag4 = true;
        }

        let now = new Date();
        let birth = new Date(birthday);
        if(birth>now){
            $("#birthday").next().text("生日不能大于当前日期");
            $("#birthday").next().addClass("red");
            flag5 = false;
        }else{
            $("#birthday").next().text("√");
            $("#birthday").next().addClass("green");
            flag5 = true;
        }

        //验证邮箱
        let reg2 = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if(reg2.test(email)){
            $("#email").next().text("√");
            $("#email").next().addClass("green");
            flag6 = true;
        }else{
            $("#email").next().text("邮箱格式不正确");
            $("#email").next().addClass("red");
            flag6 = false;
        }

        return flag1&&flag2&&flag3&&flag4&&flag5&&flag6;
    }
</script>
</html>
